<template>
  <el-container ref="container">
    <el-header style="height: auto" class="table-header">
      <!-- 按钮集合 -->
      <!-- <buttonGroup :buttonGroups="buttonGroups"   v-model="searchInfo" /> -->
      <formSearch :buttonGroups="buttonGroups" v-model="searchInfo" />
    </el-header>

    <el-main>
      <tableView ref="table" :viewData="viewData" :columnConfigs="columnConfigs" v-model="selectData">
      </tableView>
    </el-main>

    <el-dialog :title="dialogFormTitle" width="600px" :modal-append-to-body='false' :visible.sync="dialogFormVisible">
      <dialogForm :pkid="pkid" @closeMoule="closeMoule" />
    </el-dialog>
    <el-dialog :title="dialogUserTitle" width="400px" :modal-append-to-body='false' :visible.sync="dialogUserVisible">
      <toRole :pkid="pkid" @closeMoule="closeMoule" />
    </el-dialog>

  </el-container>
</template>

<script>
import buttonGroup from "@/components/button/group";
import formSearch from "@/components/table/search";
import tableView from "@/components/table/view";
import dialogForm from "./edit.vue";
import toRole from "./torole.vue";
export default {
  components: {
    "buttonGroup": buttonGroup,
    'formSearch': formSearch,
    "tableView": tableView,
    'dialogForm': dialogForm,
    'toRole': toRole,
  },
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      dialogUserVisible: false,
      pkid: 0,
      dialogFormTitle: '新增管理用户',
      dialogUserTitle: '角色用户配置',

      searchInfo: {
        ManageUserName: {
          componentName: "form-input",
          label: "用户名称",
          clearable: true,
          value: "",
          where: 'like'
        },
      },
      buttonGroups: [{
        icon: "el-icon-plus",
        text: "添 加",
        type: "primary",
        _click: () => {
          this.dialogFormVisible = true
        },
      }, {
        icon: "el-icon-search",
        text: "搜 索",
        type: 'primary',
        _click: () => { this.search() }
      }],
      selectData: [],
      viewData: [],
      columnConfigs: [{
        prop: "ManageUserId",
        type: "selection",
      }, {
        prop: "ManageUserName",
        label: "用户名称",
        icon: "el-icon-time",
      }, {
        prop: "ManageAccount",
        label: "用户账号"
      }, {
        prop: "CreateDate",
        label: "用户创建时间"
      }, {
        prop: "",
        label: "操作",
        listScopeTemplate: [
          {
            componentName: "button-input",
            icon: "el-icon-edit",
            type: "primary",
            text: "编辑",
            _click: (index, row) => {
              this.dialogFormTitle = "编辑管理用户";
              this.pkid = row.ManageUserId;
              this.dialogFormVisible = true;
            },
          }, {
            componentName: "button-input",
            icon: "el-icon-setting",
            type: "primary",
            text: "用户角色",
            _click: (index, row) => {
              this.pkid = row.ManageUserId;
              this.dialogUserVisible = true;
            },
          }],
      }],
    };
  },
  created() {
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      let json = this.$core.CreateConditionJson(this.searchInfo, this.$refs.table.pageData);

      let query = {
        user: "string",
        target: "ManageUserInfo",
        operation: "Get",
        json: json,
      }
      // 请求接口
      this.$http.generalAPI(query, (res) => {

        this.loading = false;
        if (res.Code == 200) {
          //获取菜单信息
          this.viewData = res.Data
        }
      });
    },
    closeMoule(obj) {
      this.pkid = 0;
      this.dialogFormVisible = false;
      this.dialogUserVisible = false;
      if (obj) {
        this.search();
      }
    }
  },
  watch: {},
};
</script>